// 供应商签订合同信息
<template>
  <basic-dialog
    :visible="visible"
    :title="'合同信息'"
    :ok-text="'确认'"
    :show-close="false"
    :handle-ok="handleSave"
    :handle-close="handleCloseDialog"
    :handle-opened="handleOpenDialog"
    :loadingBtn="submitLoading"
  >
    <div class="form-container">
      <el-form
        ref="supplierForm"
        :model="supplierForm"
        label-width="125px"
      >
        <el-card
          class="supplier-info"
          shadow="never"
        >
          <el-form-item label="中标供应商：">
            <span>{{supplierForm.supplierName}}</span>
          </el-form-item>
          <el-form-item label="是否签订合同：">
            <el-radio-group v-model="supplierForm.signContract">
              <el-radio :label='1'>签订合同</el-radio>
              <el-radio :label='0'>不签订合同</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="不签订合同原因：">
            <el-input
              v-model.trim="supplierForm.noSignContractReason"
              type="textarea"
            />
          </el-form-item>
          <el-form-item label="上传合同附件：">
            <el-upload
              class="upload-demo"
              action="/srm-api/orderInquiry/uploadContract"
              accept=".doc, .docx, .xls, .xlsx, .pdf, .jpg, .jpge, .png"
              :on-remove="handleRemove"
              :before-upload="beforeFileUpload"
              :on-success="onUploadsuccess"
              :on-error="onUploadError"
              :fileList="supplierForm.fileList"
            >
              <el-button
                type="primary"
                size="small"
              >上传附件</el-button>
            </el-upload>
          </el-form-item>
        </el-card>
      </el-form>
    </div>
  </basic-dialog>
</template>
<script>
import { isResponseSuccess } from '@sourcing/utils'
import BasicDialog from '@sourcing/components/BasicDialog';
import {
  submitContractInfoService
} from '@/api/sourcing/purchaseInquiry'

export default {
  name: 'SupplierContractDialog',
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean,
    },
    supplierInfo: {
      type: Object,
      default () {
        return {};
      },
    },
  },
  data () {
    return {
      supplierForm: {
        sourcingSupplierId: '',
        supplierName: '',
        signContract: '',
        noSignContractReason: '',
        contractName: '',
        newContractName: '',
        filePath: '',
        fileSize: '',
        fileList: [],
      },
      supplierFormList: [],
      submitLoading: false,
    };
  },

  methods: {
    // 关闭弹窗
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    // 打开弹窗
    handleOpenDialog () {
      this.handleRemove()
      this.supplierForm.signContract = ''
      this.supplierForm.noSignContractReason = ''
      const {
        supplierName,
        sourcingSupplierId
      } = this.supplierInfo;
      this.supplierForm.supplierName = supplierName;
      this.supplierForm.sourcingSupplierId = sourcingSupplierId;
    },
    handleSave () {
      // 存在未填写原因的供应商
      const { signContract, noSignContractReason, contractName } = this.supplierForm;
      if (signContract == 0 && !noSignContractReason) {
        return this.$message.warning('不签合同原因不能为空')
      }
      if (signContract == 1 && !contractName) {
        return this.$message.warning('请上传签订合同附件')
      }
      this.submitContractInfo()
    },
    async submitContractInfo () {
      const res = await submitContractInfoService(
        { ...this.supplierForm },
        state => { this.submitLoading = state })
      if (res) {
        this.handleCloseDialog()
        this.$emit('signContractCallback', { ...this.supplierInfo })
      }
    },
    // 附件上传成功
    onUploadsuccess (res) {
      this.supplierForm.fileList = [];
      if (isResponseSuccess(res)) {
        const { contractName, newContractName, filePath, fileSize } = res.data;
        const file = { name: contractName };
        this.supplierForm.fileList = [file];
        this.supplierForm.contractName = contractName;
        this.supplierForm.newContractName = newContractName;
        this.supplierForm.filePath = filePath;
        this.supplierForm.fileSize = fileSize;
      } else {
        this.$message.error(res.msg || '操作失败');
      }
    },
    // 附件上传校验
    beforeFileUpload (file) {
      const fileExt = file.name.replace(/.+\./, '');
      const fileTypeArr = [ 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'jpg', 'jpge', 'png' ];
      const isRightType = fileTypeArr.includes(fileExt.toLowerCase());
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isRightType) {
        this.$message.error('请上传（doc、docx、xls、xlsx、pdf、jpg、jpge、png）格式的文件!');
      }
      if (!isLt10M) {
        this.$message.error(`上传文件大小不能超过 10MB!`);
      }
      return isRightType && isLt10M;
    },
    onUploadError (obj, res) {
      this.$message.error(res.msg || '上传异常');
    },
    // 删除文件
    handleRemove () {
      this.supplierForm.fileList = [];
      this.supplierForm.contractName = '';
      this.supplierForm.newContractName = '';
      this.supplierForm.filePath = '';
      this.supplierForm.fileSize = '';
    },
  },
};
</script>
<style lang="less" scoped>
.form-container {
  .supplier-info {
    margin-bottom: 10px;
  }
}
</style>
